<template>
  <!-- 对话框(添加 / 修改) -->
  <el-dialog :title="title" :visible.sync="show" width="500px" append-to-body :before-close="cancel">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                  <el-form-item label="考勤用户信息(关联用户表)" prop="userId">
                    <el-select v-model="form.userId" placeholder="请选择考勤用户信息(关联用户表)">
                          <el-option label="请选择字典生成" value="" />
                    </el-select>
                  </el-form-item>
                      <el-form-item label="请假天数(单位:天)" prop="leaveDays">
                        <el-input v-model="form.leaveDays" placeholder="请输入请假天数(单位:天)" />
                      </el-form-item>
                  <el-form-item label="请假开始时间" prop="leaveStartTime">
                    <el-date-picker clearable v-model="form.leaveStartTime" type="date" value-format="timestamp" placeholder="选择请假开始时间" />
                  </el-form-item>
                  <el-form-item label="请假结束时间" prop="leaveEndTime">
                    <el-date-picker clearable v-model="form.leaveEndTime" type="date" value-format="timestamp" placeholder="选择请假结束时间" />
                  </el-form-item>
                  <el-form-item label="请假说明" prop="leaveExplain">
                    <el-input v-model="form.leaveExplain" type="textarea" placeholder="请输入内容" />
                  </el-form-item>
                  <el-form-item label="审批状态" prop="approvalStatus">
                    <el-select v-model="form.approvalStatus" placeholder="请选择审批状态" clearable size="small">
                      <el-option
                        v-for="dict in this.getDictDatas(DICT_TYPE.ATTENDANCE_APPROVAL_STATUS)"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                      <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" placeholder="请输入备注" />
                      </el-form-item>
                      <el-form-item label="机构编号" prop="orgId">
                        <el-input v-model="form.orgId" placeholder="请输入机构编号" />
                      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { createAttendanceManagement, updateAttendanceManagement } from "@/api/study/attendanceManagement";

  export default {
    name: "AttendanceManagementEdit",
    components: {
    },
    data() {
      return {
        // 表单参数
        form: {},
        // 表单校验
        rules: {
                        userId: [{ required: true, message: "考勤用户信息(关联用户表)不能为空", trigger: "change" }],
                        leaveDays: [{ required: true, message: "请假天数(单位:天)不能为空", trigger: "blur" }],
                        leaveStartTime: [{ required: true, message: "请假开始时间不能为空", trigger: "blur" }],
                        leaveEndTime: [{ required: true, message: "请假结束时间不能为空", trigger: "blur" }],
                        leaveExplain: [{ required: true, message: "请假说明不能为空", trigger: "blur" }],
                        approvalStatus: [{ required: true, message: "审批状态不能为空", trigger: "blur" }],
        }
      };
    },
    created() {},
    props: {
      // 是否显示弹出层
      show: {
        type: Boolean,
        default: false
      },
      // 显示弹出层标题
      title: {
        type: String,
        default: ''
      }
    },
    methods: {
      /** 初始化编辑的数据**/
      initData(rowData) {
        this.reset();
        if (rowData && rowData.id) {
          this.form = rowData;
          this.form.datetimerange = [this.form.startTime,this.form.endTime]
        }
      },
      /** 取消按钮 */
      cancel() {
        this.$emit('update:show', false)
        this.reset();
      },
      /** 表单重置 */
      reset() {
        this.form = {
                            id: undefined,
                            userId: undefined,
                            leaveDays: undefined,
                            leaveStartTime: undefined,
                            leaveEndTime: undefined,
                            leaveExplain: undefined,
                            approvalStatus: undefined,
                            remark: undefined,
                            orgId: undefined,
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (!valid) {
            return;
          }
          // 修改的提交
          if (this.form.id != null) {
            updateAttendanceManagement(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.cancel();
              this.$emit('success')
            });
            return;
          }
          // 添加的提交
          createAttendanceManagement(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.cancel();
            this.$emit('success')
          });
        });
      },

    }
  };
</script>
